
	<!DOCTYPE html>
	<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>hello_react</title>
		<!-- 引入react核心库 -->
		<script type="text/javascript" src="../js/react.development.js"></script>
		<!-- 引入react-dom，用于支撑react操作DOM-->
		<script type="text/javascript" src="../js/react-dom.development.js"></script>
		<!-- 引入babel，用于将jsx转为js -->
		<script type="text/javascript" src="../js/babel.min.js"></script>
	</head>

	<body>
		<!-- 准备好一个容器 -->
		<div id="test"></div>
		<div id="demo"></div>

	<script type="text/babel">/* 此处必须写成babel */
		class Person{ 
			// this  指向类的实例对象（谁new的指谁）    p1
			constructor(name,age){
				this.name = name
				this.age = age
			}

			// 一般方法
			speak(){
				// speak方法放在了类的原型对象上，供实例使用
				console.log(`我叫${this.name}，年龄${this.age}`)
			}
		}
		// 继承 Student会有Person中的所有属性方法
		class Student extends Person{
			constructor(name,age,gread){
				super(name,age)	//相同的属性就直接用super代替了（必须写在最前）
				this.gread = gread
			}
			// 重写父类方法
			speak(){
				console.log(`我叫${this.name}，年龄${this.age}，年级是${this.gread}`)
			}
			study(){
				console.log(`我在学习`)
			}
		}
		// 创建类的实例
		const p1 = new Person("yuge",18)
		const s1 = new Student("xiaodi",13,"6年级")

		// console.log(p1);
		console.log(s1);
		// p1.speak()
		s1.speak()
	</script>
	</body>
	<style>
		.title{
			background-color: aqua;
		}
	</style>

	</html>
